<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>

<body>
    <!-- 事件委托
    事件委托又称为事件代理 事件委派：将多个子元素的事件委托给父元素进行处理
    利用了事件冒泡的原理
     可以给未来元素添加事件   
    -->
    <ul class="list">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <button class="btn">添加44</button>
    <button class="remove">移除事件委托</button>
    <script>
        // 用事件代理
        /*   $('.list').click(function (e) {
              console.log('晏公子，很帅！！')
              // 当前事件元素
              console.log(e.target);
          })*/
        $('.btn').click(function () {
            $('.list').append('<li>444</li>');
        })

        // jQuery  
        $('.list').delegate('li', 'click', function () {
            console.log('list 事件委托')
        })
        // 移除事件委托
        $('.remove').click(function () {
            $('.list').undelegate('click');
        })
    </script>
</body>

</html>